<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    a {
        text-decoration: none;
        cursor: pointer !important;
    }

    body {
        font-size: 16px;
        font-family: Microsoft Yahei, SimSun, Helvetica;
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #333;
        background: #fff;
    }

    .sharp {
        width: 100%;
        height: 100%;
        position: fixed;
        filter: blur(64px);
        background: #fff;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .sharp::after {
        content: '';
        clip-path: polygon(1.68002% 23.734%, 52.6783% 26.9482%, 54.1128% 34.844%, 53.8185% 93.5709%, 78.8007% 1.64461%, 92.9711% 89.523%, 91.7055% 16.3905%, 82.6714% 79.6506%, 57.5301% 65.1318%, 93.2002% 76.6128%, 31.1894% 85.4638%, 99.7068% 40.0821%, 10.6835% 67.7421%, 62.4306% 63.0975%, 15.6554% 91.0503%);
        background: linear-gradient(to right bottom, rgb(244, 114, 182), rgb(236, 72, 153));
        transform: rotate(35deg);
        opacity: .55;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        animation: bgchange 3s infinite ease-in-out alternate-reverse;
    }

    @keyframes bgchange {
        0% {
            filter: hue-rotate(0deg);
        }

        100% {
            filter: hue-rotate(50deg);
        }
    }

    .btn-17,
    .btn-17 *,
    .btn-17 :after,
    .btn-17 :before,
    .btn-17:after,
    .btn-17:before {
        border: 0 solid;
        box-sizing: border-box;
    }

    .btn-17 {
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: button;
        background-color: #000;
        background-image: none;
        color: #fff;
        cursor: pointer;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
            Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
            Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        font-weight: 900;
        line-height: 1.5;
        margin: 0;
        -webkit-mask-image: -webkit-radial-gradient(#000000, #fff);
        padding: 0;
        text-transform: uppercase;
    }

    .btn-17:disabled {
        cursor: default;
    }

    .btn-17:-moz-focusring {
        outline: auto;
    }

    .btn-17 svg {
        display: block;
        vertical-align: middle;
    }

    .btn-17 [hidden] {
        display: none;
    }

    .btn-17 {
        border-radius: 99rem;
        border-width: 2px;
        padding: 0.8rem 3rem;
        z-index: 0;
    }

    .btn-17,
    .btn-17 .text-container {
        overflow: hidden;
        position: relative;
    }

    .btn-17 .text-container {
        display: block;
        mix-blend-mode: difference;
    }

    .btn-17 .text {
        display: block;
        position: relative;
    }

    .btn-17:hover .text {
        -webkit-animation: move-up-alternate 0.3s forwards;
        animation: move-up-alternate 0.3s forwards;
    }

    @-webkit-keyframes move-up-alternate {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(80%);
        }

        51% {
            transform: translateY(-80%);
        }

        to {
            transform: translateY(0);
        }
    }

    @keyframes move-up-alternate {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(80%);
        }

        51% {
            transform: translateY(-80%);
        }

        to {
            transform: translateY(0);
        }
    }

    .btn-17:after,
    .btn-17:before {
        --skew: 0.2;
        background: #fff;
        content: "";
        display: block;
        height: 102%;
        left: calc(-50% - 50% * var(--skew));
        pointer-events: none;
        position: absolute;
        top: -104%;
        transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
        transition: transform 0.2s ease;
        width: 100%;
    }

    .btn-17:after {
        --progress: 0%;
        left: calc(50% + 50% * var(--skew));
        top: 102%;
        z-index: -1;
    }

    .btn-17:hover:before {
        --progress: 100%;
    }

    .btn-17:hover:after {
        --progress: -102%;
    }
</style>

<body>
    <a class="btn-17" href="http://127.0.0.1:5502/web/img/jyj1.jpg" download="img.jpg" style="margin-right: 30px;">
        <span class="text-container">
            <span class="text">普通下载</span>
        </span>
    </a>
    <a class="btn-17" data-thunder href="http://127.0.0.1:5502/web/img/jyj1.jpg">
        <span class="text-container">
            <span class="text">迅雷下载</span>
        </span>
    </a>
    <div class="sharp"></div>
</body>
<script>
    const links = document.querySelectorAll("[data-thunder]");
    for (const link of links) {
        const base64 = btoa(`AA${link.href}ZZ`);
        link.href = `thunder://${base64}`
    }
</script>

</html>